<template>
	<view>
		<view class="yearDelay_wrapper">
			<view class="top_text">
				<view class="text_L">
					<image src="@/static/images/maintain/planicon.png" mode=""></image>
					<text>任务:</text>
				</view>
				<view class="text_R">
					<text>{{objInfo.planCheckName || "--"}}</text>
					<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
					<text>{{objInfo.buildingAddress || "--"}}</text>
				</view>
			</view>
			<view class="item_task">
				<view class="task_title">此任务将推迟到<text>{{tomorrowDate}}</text> <text v-if="showTomorrow">(明天)</text> 执行</view>
				<view class="task_tips">
					<image src="@/static/images/maintain/tips.png" mode=""></image>
					<text style="font-weight: 400;">非特殊情况下年审梯仅允许延期保养1天</text>
				</view>
			</view>
			
			<view class="calendar_reason">
				<view class="reason_remarks">
					<view class="titleMax">原因与证明</view>
					<view class="title">日期调整原因<text style="color:red;">*</text></view>
					<view class="remarks">
						<textarea
							type="textarea"
							v-model.trim="objData.defertDesc"
							height="208rpx"
							placeholder="请输入调整日期的原因"
							placeholder-class="textare"
							style="font-size: 28rpx;height:208rpx;"
							maxlength="300"
						/> 
						<view class="length">{{ objData.defertDesc.length >= 300?'300/300':objData.defertDesc.length + '/300' }}</view>
					</view>	
				</view>
				
				<view class="reason_img">
					<view class="title">调整证明
						<text style="color:red;">*</text>
						<text style="color: #999;font-size: 24rpx;">(最多可上传9张图片)</text>
					</view>
					<view class="parts_img">
						<imageDragSort 
						max="9" 
						:list="imgUrls" 
						:delayTypes="false"
						:isVideoShow="false"
						@changeList="changeImg"
						tips="上传图片"
						></imageDragSort>
					</view>	
				</view>
			</view>
			
			<view class="BA_item_botm" >
				<view class="botm" @click="submitClick">确定</view>
			</view>
			<!-- 延期保养对话框start -->
			<uni-popup ref="deferredPopup">
				<view class="popup">
					<view class="title">延期保养</view>
					<view class="content">
						<view class="delay_detail">
							<text style="font-size: 24rpx;">任务:</text>
							<text style="font-size: 24rpx;">{{objInfo.planCheckName || "--"}}</text>
							<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
							<text style="font-size: 24rpx;">{{objInfo.buildingAddress || "--"}}</text>
						</view>
						<view class="delay_date">
							<view class="date_text">此任务将调整至</view>
							<view class="date_s"><text>{{ tomorrowDate }}</text> <text v-if="showTomorrow">(明天)</text>执行</view>
						</view>
					</view>
					<view class="bottom">
						<view @click="$refs.deferredPopup.close()">取消</view>
						<view class="comfire" @click="rescueComfire">确认</view>
					</view>
				</view>
			</uni-popup>
			<!-- 延期保养对话框end -->
		</view>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import { formatTime } from '@/utils/utils.js';
import {addAnnualSave} from '@/apis/project.js';
import dayjs from 'dayjs';
export default {
	name:'yearDelay',
	components:{
		imageDragSort
	},
	data() {
		return {
			objData:{
				defertDesc:'',
				defertImg:'',
				planDate:'',
				planId:'',
				oldPlanDate:'',
			},
			elevator:{},
			tomorrowDate:'',
			objInfo:{},
			imgUrls:[],
			showTomorrow:false,// 是否显示明天
		};
	},
	onLoad(opt) {
		let obj = JSON.parse(opt.needObj) || {};
		if (Object.keys(obj).length > 0) {
			this.objData.planId = obj.planId;
			this.objData.oldPlanDate = obj.planDate + ' 00:00:00';
			this.objInfo = obj;
				
			if (obj.planDate) {
				let str = obj.planDate.replaceAll('-','/');
				this.tomorrowDate = formatTime(new Date(str).getTime() + 24 * 60 * 60 * 1000).replaceAll('-','/');
				// 任务日期等于当前日期显示 明天
				if (new Date(str).getTime() / 1000 === new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000) {
					this.showTomorrow = true;
					this.tomorrowDate = formatTime(new Date().getTime() + 24 * 60 * 60 * 1000).replaceAll('-','/');
				}
			}
		}
	},
	methods: {
		submitClick() {
			if (this.objData.defertDesc.length <= 0) {
				uni.showToast({
					title: '请输入日期调整原因',
					icon: 'none'
				});
				return; 
			}
			if (this.imgUrls.length <= 0) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				});
				return;
			}
				
			this.$refs.deferredPopup.open();
		},
		// 
		rescueComfire() {
			uni.showLoading({
				title:'提交中',
				mask:true,
			});
			this.objData.defertImg = this.imgUrls.map(item=>item.url).join(',');
			let strDate = this.objInfo.planDate.replaceAll('-','/');
			this.objData.planDate = formatTime(new Date(strDate).getTime() + 24 * 60 * 60 * 1000) + ' 00:00:00';
			addAnnualSave(this.objData).then(res=>{
				if (res.code === 200) {
					uni.hideLoading();
					uni.showToast({
						title: '日期调整成功',
						icon: 'none'
					});
					setTimeout(()=>{
						this.$refs.deferredPopup.close();
						uni.navigateBack({
							delta: 2
						});
					},1000);
				}
			});
		},
			
		// 图片上传
		changeImg(imgArr = []) {
			this.imgUrls = imgArr;
		},
			
	}
};
</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	%widthPage{
		width: 680rpx;
		margin: 0 auto;
	}
	@mixin fontColors($px,$count,$colour) {
		font-size: $px;
		font-weight: $count;
		color: $colour;
	}
	.yearDelay_wrapper{
		// @extend %widthPage;
		// background: #f3f6f8;
		width: 710rpx;
		margin: 0 auto;
		.top_text{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			.text_L{
				flex: 0 0 90rpx;
				font-size: 24rpx;
				color: #666;
				image{
					width: 24rpx;
					height: 24rpx;
					vertical-align:middle;
					margin-bottom: 5rpx;
				}
			}
			.text_R{
				flex: 1;
				font-size: 24rpx;
				color: #666;
				.text_year{
					display: inline-block;
					font-size: 24rpx;
					color: #666;
					border-left: 2rpx #ccc solid;
					border-right: 2rpx #ccc solid;
					padding: 0 10rpx;
					margin: 0 10rpx;
				}
			}
		}
		.item_task{
			background: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			.task_title{
				@include fontColors(32rpx,600,#333333);
				margin-bottom: 15rpx;
				text{
					font-size: 32rpx;
					font-weight: 600;
					color: #0091ff;
				}
			}
			.task_tips{
				@include fontColors(24rpx,500,#666);
				image{
					width: 24rpx;
					height: 24rpx;
					vertical-align: middle;
					margin-bottom: 5rpx;
				}
			}
		}
		.calendar_reason{
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			.reason_remarks{
				padding: 20rpx;
				.titleMax{
					@include fontColors(30rpx,700,#333333);
					margin-bottom: 15rpx;
				}
				.title{
					margin-bottom: 15rpx;
				}
				.remarks{
					width: 94%;
					padding: 20rpx;
					height: 208rpx;
					border: 2rpx solid #e9e9e9;
					border-radius: 4rpx;
					position: relative;
					padding-bottom: 30rpx;
					textarea {
						font-size: 28rpx;
						width: 100%;
						height: 208rpx;
						
					}
					.textare{
						color: #ccc;
					}
					.length {
						text-align: right;
						color: #ccc;
						position: absolute;
						right: 10rpx;
						font-size: 2;
						font-size: 24rpx;
						bottom: 5rpx;
					}
				}
			}
			.reason_img{
				padding: 20rpx;
				.parts_img{
					margin-top: 20rpx;
				}
			}
		}
		
		.BA_item_botm{
		    position: fixed;
		    bottom: 0;
		    left: 0;
		    // z-index: 9;
		    height: 98rpx;
		    display: flex;
		    align-items: center;
		    width: 100%;
		    background: #fff;
			.botm{
				width: 720rpx;
				margin: 0 auto;
				height: 70rpx;
				background: #0091ff;
				border-radius: 8rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
			}
			.botms{
				background: #efefef;
			}
		}
		
		.popup {
			padding: 24rpx 28rpx 0 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			width: 580rpx;
			border-radius: 24rpx;
			.title {
				color: #000;
				font-size: 32rpx;
				font-weight: 600;
				padding-bottom: 20rpx;
				text-align: center;
			}
			.content {
				text-align: center;
				color: #333;
				margin-bottom: 38rpx;
				.delay_detail {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text:{
						display: inline-block;
						font-size: 24rpx;
						color: #666;
					}
					.text_year{
						font-size: 24rpx;
						border-left: 2rpx #ccc solid;
						border-right: 2rpx #ccc solid;
						padding: 0 10rpx; 
						margin: 0 10rpx;
					}
				}
				.delay_date {   
					margin: 15rpx 0;
					font-size: 28rpx;
					.date_text{
						@include fontColors(28rpx,400,#333333);
					}
					.date_s{
						@include fontColors(28rpx,400,#000);
						text{
							font-size: 28rpx;
							color: #0091ff;
							font-weight: 600;
						}
						
					}
					
				}
				
			}
			.bottom {
				display: flex;
				border-top: 2rpx solid #f5f5f5;
				height: 76rpx;
		
				view {
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #999;
				}
				.comfire {
					color: #0091ff;
					border-left: 2rpx solid #f5f5f5;
				}
			}
		}
	}
</style>
